<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
    <input type="file" id="imgNode" style="display: none"
       class="form-control-plaintext"
       name="face" value="">
<img id="showNode" src="./images/a.jpg" class="rounded mx-auto d-block" 
width="200" height="200"
     onclick="handlerOpenUpload()">

     <script>
         function handlerOpenUpload() {
            imgNode.click()
         }

         imgNode.onchange = function(e) {
                //开始上传文件
            const formData = new FormData();
            // 拼接节点中的文件  this.files[0]
            formData.append("face", this.files[0]) //  获取文件
            $.ajax({
                url:"http://localhost:8080/upload/file",
                method:"post",
                processData:false,
                contentType:false,
                data:formData,
                success(res) {
                     console.log(res);
                     if(res.status == 200) {
                        showNode.src = "http://localhost:8080"+res.data;
                     }
                }
            })
            
         }
     </script>
    
    
</body>
</html>